<template>
	<view class="work">
		<view class="search">
			<u-search placeholder="请输入身份证号查询" v-model="val" @custom="searchCard" @search="searchCard" :show-action="false"
			placeholder-color="#999"
				@clear="clearCard">
			</u-search>
		</view>
		<view class="list" v-if="list.length > 0">
			<view class="item" v-for="(item,index) in list" :key="index" @click="gotoAttendance(item.partner_id,item.project)">
				<view class="avatar">
					<image :src="item.face" mode=""></image>
				</view>
				<view class="baseinfo">
					<view class="name">{{item.name}}</view>
					<view class="card common">
						<text>身份证号</text>
						<text>{{item.idcard.replace(/^(.{4})(?:\d+)(.{4})$/,"$1******$2")}}</text>
					</view>
					<view class="project common">
						<text>所在项目</text>
						<text>{{item.project}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import api from '@/static/js/api.js'

	export default {
		data() {
			return {
				val: '',
				list: [],
				userInfo: {}
			}
		},
		onShow() {
			if (uni.getStorageSync('userInfo')) {
				this.userInfo = JSON.parse(uni.getStorageSync('userInfo'));
			}
			// else {
			// 	uni.showToast({
			// 		icon: 'none',
			// 		title: '请登录'
			// 	})
			// 	uni.switchTab({
			// 		url: '/pages/main/mine'
			// 	})
			// }
		},
		methods: {
			IDCard(value) {
				let reg = /^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/;
				return reg.test(value)
			},
			searchCard(val) {
				var idcard = this.$u.trim(val)
				if (!this.IDCard(idcard)) {
					uni.showToast({
						icon: 'none',
						title: '请输入正确的身份证号'
					})
					this.list = []
					return
				}
				this.list = []
				api.empQuery('res.partner', '_search_work_attendance', this.userInfo.access_token, this.userInfo.uid, '',
						idcard)
					.then(res => {
						if (res.data.length == 0) {
							uni.showToast({
								icon: 'none',
								title: '暂无数据'
							})
						} else {
							this.list = res.data
						}
					})
			},
			clearCard() {},
			gotoAttendance(id,project) {
				uni.navigateTo({
					url: `/pages/home/work/workerAttendance?id=${id}&&project=${project}`
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.work {
		width: 100vw;
		height: 100vh;
		background-color: #F5F5F9;

		.search {
			padding: 30rpx;
			background: #fff;
		}

		.list {
			padding: 0rpx 30rpx 30rpx 30rpx;

			.item {
				padding: 50rpx 0 50rpx 44rpx;
				display: flex;
				background: #fff;
				margin-top: 30rpx;
				box-shadow: 0px 2rpx 14rpx 0px #EBEBF5;
				border-radius: 4rpx;
				border: 2rpx solid #E8E8E8;

				.avatar {
					width: 120rpx;
					height: 120rpx;

					image {
						width: 100%;
						height: 100%;
						border-radius: 50%;
					}
				}

				.baseinfo {
					margin-left: 32rpx;
					.common text:last-child{
						color: #666;
						margin-left: 20rpx;
					}

					.name {
						font-size: 36rpx;
						font-weight: 500;
						color: #333333;
					}

					.card {
						font-size: 24rpx;
						color: #999999;
						margin-top: 8rpx;
					}

					.project {
						font-size: 24rpx;
						color: #999999;
						max-width: 480rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						margin-right: 4rpx;
					}
				}
			}
		}
	}

	// /deep/.u-action {
	// 	display: none;
	// }

	/deep/u-search {
		width: 100%;
	}

	/deep/.u-search {
		height: 80rpx;
		.u-content{
			height: 100%!important;
			background: #F5F5F9!important;
			border: 1px solid #E4E4E4!important;
		}
		.u-icon__icon{
			color: #999!important;
			// margin-left: 50rpx!important;
			// margin-left: 50rpx!important;
		}
		.u-input{
			margin-left: 13rpx!important;
		}
	}
</style>
